<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品页面</title>

</head>
<body>
<div id="app">


    <form>
        <ul>
            <li><input type="hidden" v-model="id"></li>
            <li>用户名</li>
            <li><input v-model="name"></li>
            <li>备注</li>
            <li><input v-model="remark"></li>
            <li v-if="id===0?true:false"><button v-on:click="save()" >新增</button></li>
            <li v-else><button v-on:click="updateById(id)">修改</button></li>
        </ul>
    </form>

    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>名字</th>
            <th>备注</th>
            <th>创建时间</th>
        </tr>
        </thead>
        <tbody v-for="goods in goodsList">
        <th >{{goods.id}}</th>
        <th>{{goods.name}}</th>
        <th>{{goods.remark}}</th>
        <th>{{goods.createdTime}}</th>
        <th v-on:click="deleteById(goods.id)">删除</th>
        <th v-on:click="selectById(goods.id)">修改</th>
        </tbody>
    </table>
</div>



   <script  src="js/axios.min.js"></script>
    <script  src="js/vue.js"></script>
<script>
    var config={
        el:"#app",
        data:{
            goodsList:[],
			name:"",
			remark:"",
            id:0
        },
        methods:{
            findAllGoods:function (){
                let url="http://localhost:8080/findGoods";
                axios.get(url)
                    .then(function (res){
                        this.vue.goodsList=res.data;
                    })
                    .catch(
                    );
            },
            deleteById(id){
                let url="http://localhost:8080/deleteById/"+id;
                axios.get(url)
                .then(function (res){
                    this.vue.findAllGoods();
                })
                .catch();
            },
			save(){
                let url="http://localhost:8080/save";
				let params={
				    "name":this.name,
                    "remark":this.remark
                };
				axios.post(url,params)
                .then(function (res){
                    this.findAllGoods();
                })
                .catch(
                );
			},
            selectById:function (id){
                let url="http://localhost:8080/selectById?id="+id;
                axios(url)
                .then(function (res){
                    this.vue.id=res.data.id;
                    this.vue.name=res.data.name;
                    this.vue.remark=res.data.remark;
                })
                .catch();
            },
            updateById:function (id){
                debugger;
                let url="http://localhost:8080/updateById";
                let params={
                    "name":this.name,
                    "id":id,
                    "remark":this.remark
                };

                axios.post(url,params)
                .then(function (res){
                    this.findAllGoods();
                })
                .catch();
            }
        },
        mounted:function(){
           this.findAllGoods();
        }

    }
    var vue=new Vue(config);
</script>
</body>
</html>